<template>
	<view class="status-step">
		<text class="status-step-item" :class="{ 'active-red': value >= 2 }">请求</text>
		<text class="status-step-item" :class="{ 'active-orange': value >= 3 }">{{ value == 4 ? '驳回' : '处理'  }}</text>
		<text class="status-step-item" :class="{ 'active-yellow': value >= 6 }">分发</text>
		<text class="status-step-item" :class="{ 'active-green': value >= 7 }">办结</text>
	</view>
</template>

<script setup>
	import { ref, defineProps } from "vue"
	
	const props = defineProps({
		value: 7
	})
</script>

<style lang="scss" scoped>
	.status-step {
		width: 150px;
		display: flex;
		// border: 1px solid rgba(0, 0, 0, 0.07);
		// border-radius: 8px;
		// overflow: hidden;
		
		&-item {
			text-align: center;
			font-size: 12px;
			color: #333333;
			flex: 1;
			padding: 4px 0;
			border: 1px solid rgba(0, 0, 0, 0.07);
			
			&:first-child {
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
			}
			
			&:last-child {
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			}
			
			&.active-red {
				color: #fff;
				background-color: var(--td-error-color);
			}
			
			&.active-orange {
				color: #fff;
				background-color: var(--td-warning-color);
			}
			
			&.active-yellow {
				color: #fff;
				background-color: #ffc75e;
			}
			
			&.active-green {
				color: #fff;
				background-color: var(--td-success-color);
			}
		}
	}
</style>